import React, { useEffect, useRef, useState } from 'react'
import { useIsElementVisible } from '../../hooks/visible'

export const FolderIcon: React.FC = () => {
  const [animate, setAnimate] = useState(false)
  const refEl = useRef<HTMLDivElement>(null)
  const visible = useIsElementVisible(refEl)

  useEffect(() => {
    let animateTimer: number | null = null
    let cleanUpTimer: number | null = null
    const triggerAnimate = () => {
      setAnimate(true)
      cleanUpTimer && window.clearTimeout(cleanUpTimer)
      cleanUpTimer = window.setTimeout(() => {
        setAnimate(false)
        animateTimer && window.clearTimeout(animateTimer)
        animateTimer = window.setTimeout(() => {
          if (visible) triggerAnimate()
        }, 1000)
      }, 2000)
    }

    if (visible) triggerAnimate()

    return () => {
      setAnimate(false)
      cleanUpTimer && clearInterval(cleanUpTimer)
      animateTimer && clearInterval(animateTimer)
    }
  }, [visible])

  return (
    <div ref={refEl} className={['folder-icon', animate ? 'animate' : ''].join(' ')}>
      <svg
        width="320"
        height="320"
        viewBox="0 0 320 320"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M264.833 172.333C264.833 185.956 253.789 184.667 240.167 184.667H79.8333C66.2112 184.667 55.1667 185.956 55.1667 172.333L67.5 98.3334C68.2708 86.5119 78.5445 73.6667 92.1667 73.6667L227.833 73.6667C241.455 73.6667 251.211 87.2827 252.5 98.3334L264.833 172.333Z"
          fill="#67757F"
        />
        <g className="file-1">
          <path
            d="M221.667 129.167C221.667 135.975 216.141 141.5 209.333 141.5H110.667C103.859 141.5 98.3333 135.975 98.3333 129.167V79.8333C98.3333 73.0192 103.859 67.5 110.667 67.5H209.333C216.141 67.5 221.667 73.0192 221.667 79.8333V129.167Z"
            fill="#CCD6DD"
          />
          <rect x="134" y="49" width="70" height="44" rx="14" fill="#CCD6DD" />
          <path
            d="M196.5 73.5C196.5 80.308 190.975 85.8333 184.167 85.8333H153.333C146.525 85.8333 141 80.308 141 73.5V67.3333C141 60.5253 146.525 55 153.333 55H184.167C190.975 55 196.5 60.5253 196.5 67.3333V73.5Z"
            fill="#FCAB40"
          />
        </g>
        <g className="file-2">
          <path
            d="M234 153.833C234 160.641 228.475 166.167 221.667 166.167H98.3333C91.5253 166.167 86 160.641 86 153.833V104.5C86 97.6921 91.5253 92.1667 98.3333 92.1667L221.667 92.1667C228.475 92.1667 234 97.6921 234 104.5V153.833Z"
            fill="#E1E8ED"
          />
          <rect x="110" y="73" width="70" height="44" rx="14" fill="#E1E8ED" />
          <path
            d="M172.5 98.5C172.5 105.308 166.975 110.833 160.167 110.833H129.333C122.525 110.833 117 105.308 117 98.5V92.3333C117 85.5253 122.525 80 129.333 80H160.167C166.975 80 172.5 85.5253 172.5 92.3333V98.5Z"
            fill="#5DADEC"
          />
        </g>
        <g className="file-3">
          <path
            d="M246.667 178.5C246.667 185.308 241.141 190.833 234.333 190.833H86.3333C79.5253 190.833 74 185.308 74 178.5V129.167C74 122.359 79.5253 116.833 86.3333 116.833L234.333 116.833C241.141 116.833 246.667 122.359 246.667 129.167V178.5Z"
            fill="#F5F8FA"
          />
          <path
            d="M124.457 169V164.151C124.457 163.336 124.154 162.928 123.548 162.928C123.246 162.928 122.955 163.05 122.677 163.294C122.403 163.539 122.113 163.871 121.805 164.291V169H120.018V161.559H121.563L121.607 162.657C121.759 162.467 121.915 162.293 122.076 162.137C122.242 161.981 122.42 161.849 122.611 161.742C122.801 161.629 123.006 161.544 123.226 161.485C123.446 161.427 123.692 161.397 123.966 161.397C124.347 161.397 124.679 161.461 124.962 161.588C125.245 161.71 125.482 161.886 125.672 162.115C125.863 162.34 126.004 162.613 126.097 162.936C126.195 163.253 126.244 163.609 126.244 164.005V169H124.457ZM134.747 164.708C134.747 164.83 134.742 164.989 134.732 165.184C134.728 165.379 134.718 165.562 134.703 165.733H129.811C129.811 166.061 129.859 166.349 129.957 166.598C130.06 166.847 130.201 167.057 130.382 167.228C130.567 167.394 130.787 167.521 131.041 167.608C131.3 167.696 131.585 167.74 131.898 167.74C132.259 167.74 132.645 167.713 133.055 167.66C133.47 167.601 133.9 167.508 134.344 167.381V168.802C134.154 168.856 133.946 168.905 133.722 168.949C133.497 168.993 133.268 169.032 133.033 169.066C132.799 169.1 132.562 169.125 132.323 169.139C132.083 169.159 131.852 169.168 131.627 169.168C131.061 169.168 130.553 169.088 130.104 168.927C129.654 168.766 129.273 168.529 128.961 168.216C128.648 167.899 128.409 167.508 128.243 167.044C128.077 166.581 127.994 166.043 127.994 165.433C127.994 164.828 128.077 164.278 128.243 163.785C128.409 163.287 128.644 162.862 128.946 162.511C129.249 162.154 129.615 161.881 130.045 161.69C130.479 161.495 130.963 161.397 131.495 161.397C132.022 161.397 132.489 161.48 132.894 161.646C133.299 161.808 133.639 162.035 133.912 162.328C134.186 162.621 134.393 162.97 134.535 163.375C134.676 163.78 134.747 164.225 134.747 164.708ZM132.931 164.452C132.936 164.159 132.899 163.905 132.821 163.69C132.743 163.47 132.635 163.29 132.499 163.148C132.367 163.006 132.21 162.901 132.03 162.833C131.854 162.765 131.664 162.73 131.458 162.73C131.009 162.73 130.641 162.882 130.353 163.185C130.064 163.482 129.894 163.905 129.84 164.452H132.931ZM142.621 169H140.636L139.845 166.642L139.603 165.821L139.361 166.664L138.6 169H136.607L135.553 161.559H137.252L137.787 165.763L137.911 166.913L138.211 165.88L138.958 163.617H140.321L141.119 165.865L141.463 166.927L141.603 165.748L142.049 161.559H143.668L142.621 169Z"
            fill="#5DADEC"
          />
          <path
            d="M158.214 169L157.687 167.11H154.347L153.805 169H152.018L154.852 159.427H157.372L160.206 169H158.214ZM156.039 161.185L154.779 165.638H157.284L156.039 161.185ZM166.043 164.452C166.053 164.173 166.039 163.937 166 163.741C165.965 163.546 165.907 163.385 165.824 163.258C165.746 163.131 165.648 163.038 165.531 162.979C165.414 162.921 165.279 162.892 165.128 162.892C164.864 162.892 164.591 163.001 164.308 163.221C164.029 163.436 163.722 163.792 163.385 164.291V169H161.554V161.559H163.172L163.238 162.643C163.36 162.452 163.497 162.281 163.648 162.13C163.805 161.979 163.976 161.849 164.161 161.742C164.352 161.629 164.562 161.544 164.791 161.485C165.021 161.427 165.272 161.397 165.545 161.397C165.921 161.397 166.253 161.463 166.542 161.595C166.834 161.722 167.079 161.913 167.274 162.167C167.474 162.42 167.621 162.74 167.713 163.126C167.811 163.507 167.853 163.949 167.838 164.452H166.043ZM175.638 168.927C175.316 169 174.991 169.059 174.664 169.103C174.337 169.146 174.027 169.168 173.734 169.168C173.246 169.168 172.823 169.117 172.467 169.015C172.115 168.912 171.822 168.756 171.588 168.546C171.358 168.336 171.188 168.07 171.075 167.748C170.968 167.42 170.914 167.032 170.914 166.583V162.95H168.915V161.559H170.914V159.654L172.745 159.178V161.559H175.638V162.95H172.745V166.451C172.745 166.876 172.843 167.198 173.038 167.418C173.233 167.633 173.561 167.74 174.02 167.74C174.312 167.74 174.598 167.716 174.876 167.667C175.155 167.618 175.409 167.562 175.638 167.499V168.927ZM182.413 169L182.369 168.026C182.213 168.192 182.049 168.346 181.878 168.487C181.708 168.624 181.52 168.744 181.314 168.846C181.109 168.949 180.885 169.027 180.641 169.081C180.401 169.139 180.138 169.168 179.85 169.168C179.469 169.168 179.134 169.112 178.846 169C178.558 168.888 178.316 168.731 178.121 168.531C177.926 168.331 177.777 168.089 177.674 167.806C177.577 167.523 177.528 167.21 177.528 166.869C177.528 166.517 177.601 166.192 177.748 165.895C177.899 165.597 178.126 165.34 178.429 165.125C178.736 164.911 179.117 164.742 179.571 164.62C180.03 164.498 180.567 164.437 181.183 164.437H182.157V163.99C182.157 163.8 182.13 163.629 182.076 163.478C182.022 163.321 181.935 163.189 181.812 163.082C181.695 162.975 181.542 162.892 181.351 162.833C181.161 162.774 180.926 162.745 180.648 162.745C180.208 162.745 179.774 162.796 179.344 162.899C178.919 162.997 178.507 163.136 178.106 163.316V161.888C178.463 161.747 178.873 161.629 179.337 161.537C179.806 161.444 180.292 161.397 180.794 161.397C181.346 161.397 181.82 161.451 182.215 161.559C182.611 161.661 182.936 161.817 183.189 162.027C183.448 162.237 183.639 162.501 183.761 162.818C183.883 163.131 183.944 163.497 183.944 163.917V169H182.413ZM182.157 165.711H181.065C180.763 165.711 180.506 165.741 180.296 165.799C180.086 165.858 179.916 165.938 179.784 166.041C179.652 166.144 179.554 166.263 179.491 166.4C179.432 166.532 179.403 166.673 179.403 166.825C179.403 167.127 179.5 167.359 179.696 167.521C179.891 167.677 180.157 167.755 180.494 167.755C180.743 167.755 181.002 167.665 181.271 167.484C181.539 167.303 181.834 167.044 182.157 166.708V165.711ZM188.397 160.042H186.295V158.651H190.228V167.608H192.374V169H186.039V167.608H188.397V160.042ZM198.849 169L196.102 165.279V169H194.315V158.651H196.102V164.708L198.702 161.559H200.936L197.918 164.95L201.185 169H198.849Z"
            fill="#67757F"
          />
          <rect x="85" y="97" width="70" height="44" rx="14" fill="#F5F8FA" />
          <path
            d="M147.5 123C147.5 129.808 141.975 135.333 135.167 135.333H104.333C97.5253 135.333 92 129.808 92 123V116.833C92 110.025 97.5253 104.5 104.333 104.5H135.167C141.975 104.5 147.5 110.025 147.5 116.833V123Z"
            fill="#E75A70"
          />
        </g>
        <path
          d="M264.833 240.167C264.833 253.789 253.789 264.833 240.167 264.833H79.8333C66.2112 264.833 55.1667 253.789 55.1667 240.167L55.1667 172.333C55.1667 158.711 66.2112 147.667 79.8333 147.667H240.167C253.789 147.667 264.833 158.711 264.833 172.333V240.167Z"
          fill="#9AAAB4"
        />
        <path
          d="M203.167 221.667C203.167 228.475 197.641 234 190.833 234H129.167C122.359 234 116.833 228.475 116.833 221.667V190.833C116.833 184.025 122.359 178.5 129.167 178.5H190.833C197.641 178.5 203.167 184.025 203.167 190.833V221.667Z"
          fill="#67757F"
        />
        <path
          d="M190.833 215.5C190.833 218.91 188.077 221.667 184.667 221.667H135.333C131.929 221.667 129.167 218.91 129.167 215.5V197C129.167 193.59 131.929 190.833 135.333 190.833H184.667C188.077 190.833 190.833 193.59 190.833 197V215.5Z"
          fill="#E1E8ED"
        />
      </svg>
    </div>
  )
}
